import './index.less';
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, TvO, NotesO } from '@react-vant/icons';
import { useEffect, useState } from 'react';
import { history } from 'umi';

const tabbarItems = [
  {
    name: 'home',
    title: '首页',
    icon: <HomeO />,
    path: '/app/home',
  },
  {
    name: 'cast',
    title: '直播',
    icon: <TvO />,
    path: '/app/cast',
  },
  {
    name: 'question',
    title: '题库',
    icon: <NotesO />,
    path: '/app/question',
  },
  {
    name: 'my',
    title: '我的',
    icon: <FriendsO />,
    path: '/app/my',
  },
];

export default function IndexPage(props) {
  const [name, setName] = useState('');

  useEffect(() => {
    const urlName = props.location.pathname.split('/')[2];
    setName(urlName);
  }, [props.location.pathname]);

  const handleChange = (itemName) => {
    const item = tabbarItems.find((item) => item.name === itemName);
    if (item) {
      history.push(item.path);
    }
  };

  return (
    <div className="app">
      <div className="main">{props.children}</div>
      <div className="demo-tabbar">
        <Tabbar value={name} onChange={handleChange}>
          {tabbarItems.map((item) => (
            <Tabbar.Item key={item.name} name={item.name} icon={item.icon}>
              {item.title}
            </Tabbar.Item>
          ))}
        </Tabbar>
      </div>
    </div>
  );
}
